CODEWITHSUNDEEP
htmlcss
user3450548
user3450548

Reputation: 215

Have i found a bug in CSS rendering on some browsers? Involved both webkit and gecko

I have a div containing one image, i wanted to auto-size the div to it's content and used one of the possible ways to do it: display: inline-block (others are float, and so on).

This works pretty fine until the image size is specified in pixels, but when i use % to specify the size everything changes, the div is stretched up to the width of the original image size even if after the image is resized.

rendered image

You can test the problem with the following:

BUG:
<div style="width: 1000px; position: relative">
	<div style="display: inline-block; background-color: #ff0000">
		<img src="http://placehold.it/1200x1500" style="width: 30%">
	</div>
</div>

WORKING:
<div style="width: 1000px; position: relative">
	<div style="display: inline-block; background-color: #ff0000; position: relative">
		<img src="http://placehold.it/1200x1500" style="width: 300px">
	</div>
</div>

I used 300px because the container with position: relative is 1000px wide. According the css specifications all elements use the first position: relative element as reference for sizing, absolute positioning, etc..

To me it seems a bug in a rendering procedure where the image should be resized but all the css have to be reapplied in order to match the new sizing of the image.

Obviously this lead to some problems when you want to use that div as reference point to place over it some other things like:

BUG:
<div style="width: 1000px; position: relative">
	<div style="display: inline-block; background-color: #ff0000">
		<div style="position: absolute; top: 10px; right: 10px">My Floating Div</div>
		<img src="http://placehold.it/1200x1500" style="width: 30%">
	</div>
</div>

<br>

WORKING:
<div style="width: 1000px; position: relative">
	<div style="display: inline-block; background-color: #ff0000; position: relative">
		<div style="position: absolute; top: 10px; right: 10px">My Floating Div</div>
		<img src="http://placehold.it/1200x1500" style="width: 300px">
	</div>
</div>

Some people could suggest to address the problem with a 30vw sizing instead of 30% but this will lead to a 30% sizing referred to the viewport size, not the container div size that is actually 1000px size.

1000px is a simple example, the same people could tell ok man, so why don't you specify manually everything but what if my width: calc(100px + 3em - 5in / 2 vw) ... ? things would get trickier

Upvotes: 0

Views: 50

Answers (1)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

It's not a bug. The percent defines a percent relative to the parent, the parent is an inline-block element with auto width, so the behavior is that expected. Change to inline and it works

BUG:
<div style="width: 1000px; position: relative">
	<div style="display: inline; background-color: #ff0000">
		<div style="position: absolute; top: 10px; right: 10px">My Floating Div</div>
		<img src="http://placehold.it/1200x1500" style="width: 30%">
	</div>
</div>

<br>

WORKING:
<div style="width: 1000px; position: relative">
	<div style="display: inline-block; background-color: #ff0000; position: relative">
		<div style="position: absolute; top: 10px; right: 10px">My Floating Div</div>
		<img src="http://placehold.it/1200x1500" style="width: 300px">
	</div>
</div>

Upvotes: 1

Related Questions