CODEWITHSUNDEEP
htmlioscsssafaribackground-size
MadeleineIph
MadeleineIph

Reputation: 3

Background-size ; strange behaviour on Safari 9

I'm working on this website: http://novoayaburto.cl

The main hero background image works fine on every browser (also mobile) except for a bug on the Safari 9 browser running on Mac OSX 10.11.

Here's a screen capture of the bug on Safari:

broken background position on Safari 9

I'm using background-size: cover to produce the expected behaviour displayed on every other browser (except Safari, which shows a broken image).

Why is this only happening on Safari? How would I be able to fix this?

Upvotes: 0

Views: 421

Answers (1)

Saran
Saran

Reputation: 1575

I inspect your website, In safari transform: translate3d(0px, 0px, 0px) is missing. Thats why its causing the half image problem.

After I put this CSS style, I see the full-size hero image in safari.

Here the safari browser view

Upvotes: 1

Related Questions