Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>From my tests:</strong> Chrome limits the size of the pseudo-elements <code>:before</code> and <code>:after</code> to 1900px (at least in this case): <a href="http://jsfiddle.net/xLF8r/4/" rel="nofollow">http://jsfiddle.net/xLF8r/4/</a></p> <p>In your case, you set the padding/margins on <code>.bottom</code> to 2900px/-2900px to so the gradient will be seen to the edge of the body. If you change that to 950px/-950px, they show up. If you set the width of the pseudo-elements to 1900px, they show up. If you set <code>right: -280%</code>, they show up (it calculates in this instance to -1900px).</p> <p>If you look at this fiddle in Firefox, the elements show up no matter what you set these sizes to. </p> <p><strong>Another test:</strong> Changing background-size allowed the element to get larger and stay visible: <a href="http://jsfiddle.net/xLF8r/6/" rel="nofollow">http://jsfiddle.net/xLF8r/6/</a></p> <p>So if you increase your background-size and change your gradient to get it to look like you have it by adding more color-stops, it should work.</p> <p>From these tests, it would appear that chrome limits the size of the pseudo element to be only 5 times larger than the background-size. 1900px / 380px = 5 in first test; 1901px makes the element disappear. 6900px / 1380px = 5 in the second test; 6901px makes the element disappear.</p> <p><strong>Edit for another test and for future reference</strong> I was curious, so I created a <strong><a href="http://codepen.io/brouxhaha/pen/FsEay" rel="nofollow">Codepen</a></strong> looking at some examples. Here, I'm able to go up to 10 times the background-size. Putting the same code into jsfiddle also shows that 10 times is working. So in your code, there is something that is reducing it to 5 times. </p> <p>I've <strong><a href="http://jsfiddle.net/xLF8r/8/" rel="nofollow">reduced your code</a></strong> to replicate this same behavior, and I'm still only getting 5 times larger instead of 10. I'm stumped as to why this is the case.</p>
    singulars
    1. This table or related slice is empty.
    1. POPseudo Elements disappear in chrome but not firefox
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USbrouxhaha
    1. USbrouxhaha
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POPseudo Elements disappear in chrome but not firefox
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COwow, awesome answer.
      singulars
      1. PO
      1. USOneEightLeft
    2. COI did some more testing and found out that 10x the background-size is what Chrome allows - I still couldn't get your code to go more than 5x.
      singulars
      1. PO
      1. USbrouxhaha
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload