Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

.img-thumbnail inside .media-left renders differently in Chrome than in Firefox #16120

Closed
gws opened this issue Mar 21, 2015 · 5 comments · Fixed by #16350
Closed

.img-thumbnail inside .media-left renders differently in Chrome than in Firefox #16120

gws opened this issue Mar 21, 2015 · 5 comments · Fixed by #16350
Labels
confirmed css
Milestone
v3.3.5

Comments

@gws
Copy link

gws commented Mar 21, 2015

When applying .img-responsive or .img-thumbnail (possibly others) to a .media-object inside .media-left, the media object gets "crushed" horizontally by the .media-body even with an explicit width (and height) set, but just in Chrome - the expected rendering occurs in Firefox. I haven't tested extensively with other browsers.

Firefox: 36.0.1
Chrome: 41.0.2272.76

I've got a minimal example of the behavior:

http://jsbin.com/lunohawexo/2

In the example, the first div.media exhibits the problem in Chrome, and the second div.media does not. Both appear as I expect in Firefox.

At this point I'm not sure if I'm doing something wrong, if this is an issue with Bootstrap's CSS, or a browser bug. I'm hoping somebody more knowledgeable can point me in the right direction.

Thanks!
@twbs-lmvtfy
Copy link

Hi @gws!

You appear to have posted a live example (http://jsbin.com/nicehopoje/5/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
  • W003: <head> is missing viewport <meta> tag that enables responsiveness

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@gws
Copy link
Author

gws commented Mar 21, 2015

Updated the link in the original post to appease the bot: http://jsbin.com/lunohawexo/2

@cvrebert cvrebert added the css label Mar 21, 2015
@cvrebert
Copy link
Collaborator

Desktop Safari 8.0.4 matches Chrome's rendering.
IE9-11 match Firefox's rendering.

@cvrebert cvrebert changed the title .img-responsive inside .media-left renders differently in Chrome than in Firefox .img-thumbnail inside .media-left renders differently in Chrome than in Firefox Mar 21, 2015
@cvrebert
Copy link
Collaborator

CC: @mdo

@thomasphorton
Copy link
Contributor

Chrome doesn't like max-width in table-cell.

Working on something along the lines of

.img-thumbnail {
  &.media-object {
    max-width: none;
  }
}

in scaffolding.less

@thomasphorton thomasphorton mentioned this issue Apr 24, 2015
Merged
@mdo mdo added this to the v3.3.5 milestone Apr 25, 2015
@cvrebert cvrebert mentioned this issue Apr 26, 2015
Closed
@TrejGun TrejGun mentioned this issue Dec 6, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
confirmed css
Projects
None yet
Milestone
v3.3.5
Development

Successfully merging a pull request may close this issue.

Add max-width: none to .media > .img-thumbnail
5 participants
@mdo @gws @cvrebert @thomasphorton @twbs-lmvtfy