Fix horizontal scrollbars on Safari when code blocks are very long #700
Conversation
| @@ -36,6 +36,8 @@ code { | |||
| content: attr(data-after-code); | |||
| } | |||
| &::before, &::after { | |||
| // ensure the pseudo elements dont fly off in space | |||
| display: block; | |||
There was a problem hiding this comment.
Was hoping it was something like this! :)
It's a little strange since the default display shows as block in Safari when a value isn't specified, but it seems to not be true.
There was a problem hiding this comment.
Maybe a Safari bug? Running the version that has regression, In the inspector, display is set to block by default.
There was a problem hiding this comment.
Tested and looks great with the minimized edge case as well.
Did a quick search for pseudo elements in other parts of the code base. Should we add this fix here as well?
https://github.com/apple/swift-docc-render/blob/715eb13b2fed2da840e7a8eda41ffec8248dd3c4/src/components/ContentNode/StrikeThrough.vue#L34
I couldn't find an example of where we use this component to test though.
I don't believe so. The strikethrough is used for inline text that looks like |
|
@swift-ci test |
…wiftlang#700) Resolves: rdar://110741983
…700) (#703) Resolves: rdar://110741983 Co-authored-by: Dobromir Hristov <[email protected]>
…wiftlang#700) (swiftlang#703) Resolves: rdar://110741983 Co-authored-by: Dobromir Hristov <[email protected]>
Bug/issue #, if applicable: 110741983
Summary
Fixes a bug on Safari, where if the last line in a codeblock is very long, the
afteraccessibility pseudo element helper gets pushed to the side, causing the browser to render hirozontal scrollbars.Dependencies
NA
Testing
Load a page with a codeblock that has very long last line
Steps:
Checklist
Make sure you check off the following items. If they cannot be completed, provide a reason.
Added tests- css onlynpm test, and it succeeded