Fixes for IE 10 and 11 layout issues, minor sass-lint rule change #20896
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Fix for Hosted caption layout issue - IE 10 and 11 do not currently recognize 'unset'
|
PRbuilds results: Screenshots 💚 Exceptions 💚 A11y validation 💚 Microdata Validation Apache Benchmark Load Testing LightHouse Reporting --automated message |
|
@katebee wins Jimmy’s Award for Best Described and Most Informative PRs 2018 hands down! Congratulations on behalf of The Committee 🥇 |
SiAdcock
reviewed
Jan 4, 2019
| @@ -32,6 +32,8 @@ | |||
| } | |||
|
|
|||
| @include mq(desktop) { | |||
| // IE 10 and 11 do not recognize 'unset' so will fallback to 'auto' which luckily gives us the desired layout | |||
| left: auto; | |||
There was a problem hiding this comment.
Does auto work across the board? If so, maybe we can lose the unset rule altogether?
|
Seen on PROD (merged by @katebee 16 minutes and 21 seconds ago)
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this change?
👉 Fix for comments ad being pushed to the right in IE
The ad shifts to the right when scrolling down on comments in internet explorer, this is related to it becoming 'sticky' and how the position settings on the wrapper change.
The fix for this is to set a width on the wrapper, since it seems IE is being finicky and otherwise pushing any
absolutepositioned elements without a width too far over. Other browsers seem to happily be calculating the width based on the child elements (the ad-slot) of the ad-slot-wapper, but not IE. 😠👉 Fix for Hosted caption layout issue
This PR allows IE to fallback to a valid CSS setting since IE 10 and 11 do not currently recognise 'unset':
👉 Update sass-lint settings to allow left property to be duplicated
This allows
leftto be duplicated within a block so long as the duplicates are next to one another. We can then lean on the cascade to let browsers use a fallback when facing css they do not understand.What is the value of this and can you measure success?
BEFORE:
❌ Above: comments slot sticky offset right going wild
❌ Below: caption text for the image is overlaying the submeta icons
AFTER:
✅ Above: intended position of the comments slot
✅ Below: intended position of the caption text
The picture above was taken in Chrome. Since Chrome recognises 'unset' this overrides the 'auto'. However, IE will not recognise 'unset' as valid CSS so respects the 'auto' instead... Hooray for cascading style sheets!
Checklist
Does this affect other platforms?
Nope
Does this affect GLabs Paid Content Pages? Should it have support for Paid Content?
Affects Hosted pages @guardian/commercial-dev
Does this change break ad-free?
Nope
Tested