Bug - h1 style looks "wrong" for Safari iOS 14 about gcweb HOT 12 CLOSED

@muling I tried prototyping potential fixes in this JSBin page. Would you happen to be able to take a screenshot of it in iOS Safari 14 if possible? "H1 thickline" represents the pre-existing CSS, whereas test1-4 represent potential fixes.

@delisma @Garneauma Would you be on board if I were to send a PR to fix this (given that it only impacts older browsers)? I feel kind of responsible since I suggested the selector that caused it 😅.

Can I Use... claims that the bug wasn't fixed in Safari until v15.4 (released in March 2022). I think that'd technically go beyond the scope of GCWeb's supported browsers, but is still relatively recent...

from gcweb.

oh sorry for the misunderstanding. here is the screenshot.

from gcweb.

Looks like #2169 (comment) is afflicted by a border-image rendering bug in several older browser rendering engines (WebKit, Blink and EdgeHTML).

Check out note 1 in Can I use's CSS3 Border images page's for more info. In a nutshell, using the border-image property apparently causes affected browsers to silently-set border-style: solid;. I was able to replicate the buggy screenshot by adding that property to the H1 in Firefox's DOM inspector.

from gcweb.

@muling can you submit a formal request to Principal Publisher? So we will be able to take a look at that compatibility issue.

Once we will receive your request, we will check our web stats to know the iOS Safari 14 should be in-scope of our browser support. In order word, it need to represent 5% or more of the all traffic on Canada.ca.

from gcweb.

Sure. I can send a request with a screenshot to principal publisher.

from gcweb.

@muling I tried prototyping potential fixes in this JSBin page. Would you happen to be able to take a screenshot of it in iOS Safari 14 if possible? "H1 thickline" represents the pre-existing CSS, whereas test1-4 represent potential fixes.

@delisma @Garneauma Would you be on board if I were to send a PR to fix this (given that it only impacts older browsers)? I feel kind of responsible since I suggested the selector that caused it 😅.

Can I Use... claims that the bug wasn't fixed in Safari until v15.4 (released in March 2022). I think that'd technically go beyond the scope of GCWeb's supported browsers, but is still relatively recent...

You cannot see the screenshot in the original ticket?

from gcweb.

You cannot see the screenshot in the original ticket?

@muling I can see your opening post's screenshots, but I don't have Safari at my disposal :(. So I'm unable to tell whether my fix attempts in this JSBin page will fix it for sure. So someone will need to verify in Safari v15.3 or lower.

from gcweb.

@muling Thanks :)! I'll try sending a PR using test4's approach later today.

from gcweb.

I found out that the CSS Gradient is not supported by Safari older than 15.4. - https://caniuse.com/css-gradients

Which means the CSS "linear-gradient" use in the border-image is not supported.

@muling Thanks for submitting the request to Principal Publisher, we will follow up on your request over there.

from gcweb.

@duboisp Although the screenshot in #2396 (comment) shows the gradient working in all 5 examples and test4 looks perfect. So that gradient bug doesn't actually affect the thickline style in practice.

from gcweb.

Sure. I can send a request with a screenshot to principal publisher.

I've been getting errors trying to submit the request...

from gcweb.

Just sent #2415.

@duboisp Feel free to do whatever you want with it :).

from gcweb.