Re: [css-d] Rendering issues
That screen flashes then the normal page renders on my Chrome 35.0.1916.153 on a laptop -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston Sent: Friday, June 20, 2014 2:43 PM To: CSS Discussion Group Subject: [css-d] Rendering issues List, We've had a report of a rendering issue on this site: http://www.mlmic.com The user saw a blank, blue screen ( a brand color) in current Chrome and Opera (Mac, I believe). Also, Google Webmaster Tools Fetch As Google also renders it blank blue. We have not been able to recreate the issue except for in Google Webmaster Tools and that doesn't give much help in troubleshooting it. Do any of you see this issue, and if so, can you help track it down? Thanks in advance... -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
Solved. Thanks all. We found an errant z-index which was putting the content behind the blue background wrapper. :-P On Mon, Jun 23, 2014 at 10:09 AM, Hahnel, Fred (DET-MRM) fred.hah...@mrm-mccann.com wrote: That screen flashes then the normal page renders on my Chrome 35.0.1916.153 on a laptop -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston Sent: Friday, June 20, 2014 2:43 PM To: CSS Discussion Group Subject: [css-d] Rendering issues List, We've had a report of a rendering issue on this site: http://www.mlmic.com The user saw a blank, blue screen ( a brand color) in current Chrome and Opera (Mac, I believe). Also, Google Webmaster Tools Fetch As Google also renders it blank blue. We have not been able to recreate the issue except for in Google Webmaster Tools and that doesn't give much help in troubleshooting it. Do any of you see this issue, and if so, can you help track it down? Thanks in advance... -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
...in that case it is interesting to see which browsers rendered that z-index property correctly... On 2014-06-23, at 1:05 PM, Tom Livingston wrote: Solved. Thanks all. We found an errant z-index which was putting the content behind the blue background wrapper. :-P On Mon, Jun 23, 2014 at 10:09 AM, Hahnel, Fred (DET-MRM) fred.hah...@mrm-mccann.com wrote: That screen flashes then the normal page renders on my Chrome 35.0.1916.153 on a laptop -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston Sent: Friday, June 20, 2014 2:43 PM To: CSS Discussion Group Subject: [css-d] Rendering issues List, We've had a report of a rendering issue on this site: http://www.mlmic.com The user saw a blank, blue screen ( a brand color) in current Chrome and Opera (Mac, I believe). Also, Google Webmaster Tools Fetch As Google also renders it blank blue. We have not been able to recreate the issue except for in Google Webmaster Tools and that doesn't give much help in troubleshooting it. Do any of you see this issue, and if so, can you help track it down? Thanks in advance... -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
On Mon, Jun 23, 2014 at 3:08 PM, Norman Fournier nor...@normanfournier.com wrote: ...in that case it is interesting to see which browsers rendered that z-index property correctly... Agreed. I don't understand why any browser showed any content at all. The selector needed JS to be active, but I tried my browser with and without JS and I still saw the content... Odd one. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
I didn't search too deeply, but I suspect it's because the html
element is classed as js, and there are a significant number of styles
in the CSS that are like this:
.js .inner{background:#1d335c;left:0;width:175%}
This is a commonly used approach, in which html is initially classed
as .no-js, and then a script is run to change the class to .js. If it
fails, you can assume that JavaScript is not enabled, and style with the
possibility of either .js or .no-js as an ancestor.
Rick Gordon
On 6/23/14 12:10 PM, Tom Livingston wrote:
On Mon, Jun 23, 2014 at 3:08 PM, Norman Fournier
I don't understand why any browser showed any content at all.
The selector needed JS to be active, but I tried my browser with and
without JS and I still saw the content...
Odd one.
___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
On Monday, June 23, 2014, Rick Gordon li...@rickgordon.com wrote:
I didn't search too deeply, but I suspect it's because the html element
is classed as js, and there are a significant number of styles in the CSS
that are like this:
.js .inner{background:#1d335c;left:0;width:175%}
This is a commonly used approach, in which html is initially classed as
.no-js, and then a script is run to change the class to .js. If it fails,
you can assume that JavaScript is not enabled, and style with the
possibility of either .js or .no-js as an ancestor.
Rick Gordon
On 6/23/14 12:10 PM, Tom Livingston wrote:
Understood. But turning off js did not allow me to replicate the issue.
Regardless, you would think if a negative z index put the content behind a
solid blue div with js enabled - as is the case with the rule in the CSS -
why did anyone see any content at any time!?!?
Like I said, odd one.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
Le 24 juin 2014 à 04:05, Tom Livingston tom...@gmail.com a écrit : We found an errant z-index which was putting the content behind the blue background wrapper. :-P Le 24 juin 2014 à 04:08, Norman Fournier nor...@normanfournier.com a écrit : ...in that case it is interesting to see which browsers rendered that z-index property correctly... Most modern browsers do. However there are more properties that affect the stacking / layering of content, independently of z-index. Opacity comes to mind, as do some of the CSS-transform properties (and in the latter case, this *may* vary between browsers…). Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
On Monday, June 23, 2014, Philippe Wittenbergh e...@l-c-n.com wrote: Le 24 juin 2014 à 04:05, Tom Livingston tom...@gmail.com javascript:; a écrit : We found an errant z-index which was putting the content behind the blue background wrapper. :-P Le 24 juin 2014 à 04:08, Norman Fournier nor...@normanfournier.com javascript:; a écrit : ...in that case it is interesting to see which browsers rendered that z-index property correctly... Most modern browsers do. However there are more properties that affect the stacking / layering of content, independently of z-index. Opacity comes to mind, as do some of the CSS-transform properties (and in the latter case, this *may* vary between browsers…). Philippe -- Philippe Wittenbergh http://l-c-n.com There are transform going on so perhaps that's what was causing the odd behavior (odd as far as I'm concerned)... -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
On Mon, Jun 23, 2014 at 8:32 PM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 24 juin 2014 à 04:05, Tom Livingston tom...@gmail.com a écrit : We found an errant z-index which was putting the content behind the blue background wrapper. :-P Le 24 juin 2014 à 04:08, Norman Fournier nor...@normanfournier.com a écrit : ...in that case it is interesting to see which browsers rendered that z-index property correctly... Most modern browsers do. However there are more properties that affect the stacking / layering of content, independently of z-index. Opacity comes to mind, as do some of the CSS-transform properties (and in the latter case, this *may* vary between browsers…). For those interested here's a good explanation of z-index stacking order and context, prefaced with a challenge to solve a problem rooted in what Philippe mentioned about other properties effects on positioning. http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ -- Jon Reece jon.re...@gmail.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
On Monday, June 23, 2014, Jon Reece jon.re...@gmail.com wrote: On Mon, Jun 23, 2014 at 8:32 PM, Philippe Wittenbergh e...@l-c-n.com javascript:; wrote: Le 24 juin 2014 à 04:05, Tom Livingston tom...@gmail.com javascript:; a écrit : We found an errant z-index which was putting the content behind the blue background wrapper. :-P Le 24 juin 2014 à 04:08, Norman Fournier nor...@normanfournier.com javascript:; a écrit : ...in that case it is interesting to see which browsers rendered that z-index property correctly... Most modern browsers do. However there are more properties that affect the stacking / layering of content, independently of z-index. Opacity comes to mind, as do some of the CSS-transform properties (and in the latter case, this *may* vary between browsers…). For those interested here's a good explanation of z-index stacking order and context, prefaced with a challenge to solve a problem rooted in what Philippe mentioned about other properties effects on positioning. http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ Learn something new everyday! -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
