Databases
StackOverflow2013
Postsdbo
POCSS3 Transform Scaled Image Hidden by div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS3 Transform Scaled Image Hidden by div
    text
    copied!<p>I am working on a BuddyPress theme where there will be some images floating right on the padder div using <code>add_action="bp_before_blog_post"</code>. On Linux/Firefox everything works as expected. The transform expands out and overlaps the sidebar div.</p> <p>On Chrome and Safari the image expands to the sidebar div but then is hidden. I have tripple checked BP-Default theme and there isn't a css <code>overflow: hidden</code> value for the sidebar, or padder div. I have checked every line of bp-default.css, and used Chrome Web Developer and Firebug to check the live css.</p> <p>I can't try a <code>position:absolute</code> as it needs to float on the right of the blog post. I setup a <a href="http://jsfiddle.net/markfinch/BB3Jm/" rel="nofollow">jsfiddle</a> to try to show the behavior except that unless I created a div with <code>overflow:hidden</code> I couldn't replicate it. When you hover over the bottom image on the right you can clearly see the clipping. I found a public site with the BP-Default theme <a href="http://www.timersys.com/demos/buddypress/" rel="nofollow">here</a>, if you need to take a look at the css. </p> <p>Since the container div does have <code>overflow: hidden</code> I am wondering if it is being inherited. If that's the case the theme doesn't work properly when I do <code>overflow: transparent</code> or remove it entirely. </p> <ul> <li>Can you find where/why the image is clipped on sidebar div edge?</li> <li>Is there a way to bust out using z-index or some other CSS method?</li> <li>Is this a bug on Chrome/Safari to clip at the div edge or maybe a bug in Firefox 23 Linux that it doesn't?</li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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