#2857 closed defect (bug) (fixed)
News blog on Firefox for android and facebook falls out of content
Reported by: | dingo_d | Owned by: | |
---|---|---|---|
Milestone: | Priority: | high | |
Component: | General | Keywords: | has-patch |
Cc: |
Description
When I opened the news on facebook about the new release I noticed that I can scroll vertically.
I checked Chrome, and there it looked fine. I went to check the Firefox browser on android and the same thing happened.
From what I've managed to inspect, it seems that the iframe holding the video overflows the container.
Also .col-9
in the wp4.css
on line 2103 has left and right margins set to 14px, but shouldn't those be paddings? I also noticed that firefox sets the box-sizing
to content-box
, which is not ok. Why isn't it set to global?
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Attachments (1)
Change History (8)
#2
@
7 years ago
- Resolution set to fixed
- Status changed from new to closed
@dingo_bastard: Thanks for identifying the issue and providing a patch!
It turns out the issue was a result of characters (invisible whitespace characters?) in the content of the WordPress Now on HackerOne post. Chrome has support for word-break: break-word
(which Firefox does not) which likely prevented it from being an issue there.
Anyhow, I retyped part of the the last sentence and everything looks fine now. It shouldn't be an issue that naturally occurs.
As for the other recommendations in your patch, we generally try not to make changes in wp4.css
except to fix verifiable issues or to add styles for new things. That styles in that file are applied to ALL of the sites associated with wordpress.org. Making a global change, even if well intentioned, might have adverse effects somewhere. So unless there are any reproducible issues you came across that you were trying to fix, we'll keep the styles as-is for now.
Cheers!
#3
@
7 years ago
Thanks for the explanation.
Wasn't aware of the wp4.css
being a global style. But the box-sizing: border-box;
rule seems logical to be globally applied, no?
#4
@
7 years ago
But the
box-sizing: border-box;
rule seems logical to be globally applied, no?
No! That's one that will easily be a problem with legacy content.
The word-wrap
rule should be extended to use all the variants for the different browsers, though. That's fairly simple and gets all browser to work instead of changing the content so the rules that are there work for all(?).
#5
@
7 years ago
No! That's one that will easily be a problem with legacy content.
In what way? Can you elaborate, please?
#6
@
7 years ago
box-sizing: border-box
affects how padding is rendered. All manual adjustments to padding in legacy content would be different if that is globally applied. This can break content layouts and make images look smaller. Especially when padding percentages are used, you just don't know what is in the old content.
A couple of years ago, I was using a theme for several sites. There was an upgrade that applied box-sizing globally. My sites looked strange and I'm sure I didn't even look at all the pages. I got the theme author to change it to only apply to images or theme-controlled elements. It has to be used together with the padding and margins, not independently.
A few months ago, I helped a theme author debug a problem where the text typed into the search box wasn't visible. It was because of the box-sizing. The padding used to line up the input with the icon was strange. As soon as we removed box-sizing, it was easy to line it up.
So, there is no knowing what kind of manual adjustments were already made to the content being styled. Adding box-sizing globally can be problematic.
Patch that fixes content overflowing