Closed Bug 539941 Opened 15 years ago Closed 8 years ago

background-position is not work properly

Categories

(Core :: Layout: Images, Video, and HTML Frames, defect)

Product:
Core
Component:
Layout: Images, Video, and HTML Frames
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: hoho1986, Unassigned)

Details

(Keywords: testcase)

Attachments

(2 files)

the html file
1.32 KB, text/html
Details
the image
469.96 KB, image/png
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 GTB6 (.NET CLR 3.5.30729) FirePHP/0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 GTB6 (.NET CLR 3.5.30729) FirePHP/0.3

Code:
<html><head><title>IMAGE PROTECTION</title><style type="text/css">#ID, #ID * { margin:0px; padding:0px; border:none; }
#ID{width:400px; height:320px; overflow:hidden; display:block;}
#ID > div { clear:both; }
#ID > div > div { float:left; width:100px; height:100px; background-image:url(try.png); background-repeat:no-repeat; }
</style></head>
<body><p>Display shuffled image normally:<div id="ID">
<div>
<div style="background-position:-300px -200px"></div><div style="background-position:-100px -100px"></div><div style="background-position:-100px -300px"></div><div style="background-position:0px 0px"></div></div>
<div>
<div style="background-position:-200px -200px"></div><div style="background-position:-200px -300px"></div><div style="background-position:0px -100px"></div><div style="background-position:-300px -100px"></div></div>
<div>
<div style="background-position:-200px -100px"></div><div style="background-position:0px -300px"></div><div style="background-position:-300px -300px"></div><div style="background-position:0px -200px"></div></div>
<div>
<div style="background-position:-200px 0px"></div><div style="background-position:-100px 0px"></div><div style="background-position:-300px 0px"></div><div style="background-position:-100px -200px"></div></div>
</div>
</p><p>Display shuffled image:<br/><img src="try.png" /></p></body></html>

The code above in Chrome is displayed correctly.
maybe it is a bug of firefox 3.5.7 or my coding problem?
if i encode a shuffled image to jpg and change <img src="try.png" /> to <img src="try.jpg" />, it works.

the screen shot here:
http://f.imagehost.org/view/0547/chrome
http://f.imagehost.org/view/0989/firefox_5

Reproducible: Always
Summary: background-position is not work porperly → background-position is not work properly
because the shuffled image is generated by PHP program in runtime, it is not same in different browser
Please attach the static image to this bug and afterward update the example page to use the image on Bugzilla. So you can also attach the test. Given the information we have from comment 0 it's not helpful.
Component: Tabbed Browser → Layout: Images
Product: Firefox → Core
QA Contact: tabbed.browser → layout.images
Attached file the html file — 

    
    

    
  

      
      
      
      

        Attached image
          
        the image
        — 
      

    


  

    
    

    
  
Sometime it can display correctly when i use web developer plug-in to disable and enable some CSS.

    
    

    
  
Please use the correct image location in the html testcase.

    
    

    
  
Maybe it is not a question of firefox. after i tested in the static html code instead of run it directly. It works.
I guess that firefox get the older version image file before the new image is generated by php.
Maybe it is not a bug, It is just a different handling between chrome and firefox.

    
    

    
  
Then you should provide a live testcase or create a HTTP log (https://developer.mozilla.org/en/HTTP_Logging).

    
    

    
  
I have a similar problem with Firefox 4b8 (win7 x64)
http://www.innomate.com/InnomatePublicPagesMedarb/JobList.aspx?CompanyId=sosu-stv

background: url(imagepath) no-repeat right bottom;

works in IE8 and Chrome, but Firefox put's it almost out of view at the top

    
    

    
  
(In reply to comment #9)
> I have a similar problem with Firefox 4b8 (win7 x64)
> http://www.innomate.com/InnomatePublicPagesMedarb/JobList.aspx?CompanyId=sosu-stv
> 
> background: url(imagepath) no-repeat right bottom;
> 
> works in IE8 and Chrome, but Firefox put's it almost out of view at the top

Looks the same to me in Firefox and Chrome.



As to the original bug report here (probably different) -- it's hard to tell what was going on, and the links to screenshots no longer work.

    
    

    
  
Yeah, i added the fixed position to the css background..

Which made me realize the whole issue is Firefox's body height is the height of all content. Seems the body is the height of the window in all other browsers.. so they don't need the fixed background position..

    
  
blocking-b2g: --- → 2.2?

    
  
blocking-b2g: 2.2? → 2.2r?
Flags: in-testsuite-

    
    

    
      
  
blocking-b2g: 2.5? → ---
Flags: in-testsuite-

    
    

    
  
Original test (attachment 421854 [details]) with a strict doctype declaration and without 5 unneeded and unnecessary declarations (which have no impact whatsoever anyway on the test):

http://www.gtalbot.org/BugzillaSection/Bug539941-background-position-incorrect.html

When I load it in Firefox 47, I get expected results.

Resolving as WORKSFORME
Status: UNCONFIRMED → RESOLVED
Closed: 8 years ago
Keywords: testcase
OS: Windows XP → All
Hardware: x86 → All
Resolution: --- → WORKSFORME

    
  
Product: Core → Core Graveyard

    
  
Product: Core Graveyard → Core

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: