<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Hidden divs on grid based elements do not appear after first column"
href="https://bugs.webkit.org/show_bug.cgi?id=150160">150160</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Hidden divs on grid based elements do not appear after first column
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>Windows 7
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Major
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>maos_2001@hotmail.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=263143" name="attach_263143" title="HTML and CSS coding for reference">attachment 263143</a> <a href="attachment.cgi?id=263143&action=edit" title="HTML and CSS coding for reference">[details]</a></span>
HTML and CSS coding for reference
When using a grid based layout for images, I have included a descriptive text div on each item which slides up when the user hovers over each individual image and slides back down when hover is removed. This works fine on the first column of images but on any other column the descriptive text div does not slide up, it appears the issue lies with either the -webkit-column-count or position:absolute; commands in CSS.
When using the Inspect Element in Chrome the text divs are seen by the browser but the CSS is not taking effect. This affects both Chrome and Safari browsers.
The JSFiddle link below shows the issue in action - the first two images have the divs slide up but the other images do not even though every image has some sort of text div applied.
If the position:absolute is changed for position:static each text div is then placed under each image so Chrome is reading the HTML code correctly, but the slide transition simply does not work.
The other issue is the CSS has specific settings for mobile devices whereby the text divs are permanently displayed over each image but again only the first column is working any other columns are simply missed, I therefore have to change the setup of the page completely so that the grid system works across all browsers.
This setup works fine in IE and Firefox
<a href="http://jsfiddle.net/jbb5Ljwy/1">http://jsfiddle.net/jbb5Ljwy/1</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>