Bug - h1 style looks "wrong" for Safari iOS 14 #2396
Comments
|
Looks like #2169 (comment) is afflicted by a Check out note 1 in Can I use's CSS3 Border images page's for more info. In a nutshell, using the |
|
@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... |
|
@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. |
|
Sure. I can send a request with a screenshot to principal publisher. |
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. |
|
oh sorry for the misunderstanding. here is the screenshot.
|
|
@muling Thanks :)! I'll try sending a PR using test4's approach later today. |
|
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 @muling Thanks for submitting the request to Principal Publisher, we will follow up on your request over there. |
|
@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. |
I've been getting errors trying to submit the request...
|
Some older browsers (most notably Safari <= 15.3) incorrectly set border-style: solid; whenever the border-image property was used. That in turn caused affected browsers to render the thickline style as a three-sided border. This works around the issue by setting the thickline style's left/right/top border-*-width properties to 0. Thanks to @donmcdill for pitching this approach (other ways I prototyped didn't work). Fixes wet-boew#2396.
Some older browsers (most notably Safari <= 15.3) incorrectly set border-style: solid; whenever the border-image property was used. That in turn caused affected browsers to render the thickline style as a three-sided border. This works around the issue by setting the thickline style's left/right/top border-*-width properties to 0. Thanks to @donmcdill for pitching this approach (other ways I prototyped didn't work). Fixes wet-boew#2396.
Some older browsers (most notably Safari <= 15.3) incorrectly set border-style: solid; whenever the border-image property was used. That in turn caused affected browsers to render the thickline style as a three-sided border. This works around the issue by setting the thickline style's left/right/top border-*-width properties to 0. Thanks to @donmcdill for pitching this approach (other ways I prototyped didn't work). Fixes wet-boew#2396.
Some older browsers (most notably Safari <= 15.3) incorrectly set border-style: solid; whenever the border-image property was used. That in turn caused affected browsers to render the thickline style as a three-sided border. This works around the issue by setting the thickline style's left/right/top border-*-width properties to 0. Thanks to @donmcdill for pitching this approach (other ways I prototyped didn't work). Fixes wet-boew#2396.
Some older browsers (most notably Safari <= 15.3) incorrectly set border-style: solid; whenever the border-image property was used. That in turn caused affected browsers to render the thickline style as a three-sided border. This works around the issue by setting the thickline style's left/right/top border-*-width properties to 0. Thanks to @donmcdill for pitching this approach (other ways I prototyped didn't work). Fixes wet-boew#2396.
Describe the bug
Extra red border appears in the h1 title in Safari
To Reproduce
Steps to reproduce the behaviour:
Example
https://www.canada.ca/en/services/jobs.html
Current behaviour
see extra red borders in screenshot
Expected behaviour
should look like this
Screenshots and/or logs
Desktop (please complete the following information):
Ok on v15+
Smartphone (please complete the following information):
Additional context
You can add any other context about the problem here.
The text was updated successfully, but these errors were encountered: