Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Problem with CSS3 Transition Opera!
New Posts  All Forums:Forum Nav:

Problem with CSS3 Transition Opera!

post #1 of 3
Thread Starter 
In my site I have a weird problem in that my slide out login bar using CSS3 Transition works in all browsers (except IE of course) does something weird in Opera: The slide in/slide out transition works, but it leaves a trail when it slides back in. I am using this css for the positioning etc. of the tab:

Code:
#tabtext, #tabtextie{
position:fixed;
text-transform:uppercase;
padding:5px;
border-radius:25px 25px 0 0;
color:#ccc;
background-color:#242424;
text-align:center;
cursor:pointer;
}
#tabtext{
height:20px;
width:150px;
margin:65px 120px;
}
#tabtextie{
margin:0 185px;
padding:5px;
height:20px;
width:150px;
}
#tab{
position:fixed;
width:185px;
height:400px;
color:#ccc;
background-color:#242424;
left:0;
margin:0 auto;
margin-top:-200px;
top:50%;
padding-left:20px;
border-radius:0 0 25px 0;
z-index:2;
}
#tab:hover{
left:200px;
}
And this is the css for the actual transition:

Code:
#tab{
transition:.5s linear;
-webkit-transition:.5s linear;
-o-transition:.5s linear;
-moz-transition:.5s linear;
}
#tab:hover{
transition:.5s linear;
-webkit-transition:.5s linear;
-o-transition:.5s linear;
-moz-transition:.5s linear;
}
And this is the html:

Code:
<section id="tab">
<!--[if gt IE 8]><!--><div id="tabtext">Login/Register</div><!--<![endif]-->
<!--[if lt IE 8]><div id="tabtextie">Login/Register</div><![endif]-->
<h3>Login</h3>
<form action="default.php" method="post">
<label for="Lname">Your Username:</label>
<input type="text" id="Lname"><br>
<label for="Lpass">Your Password:</label>
<input type="password" id="Lpass"><br><br>
<input type="submit" value="Submit">
</form>
<br>
<h3>Register</h3>
<form action="default.php" method="post">
<label for="Rname">Your Username:</label>
<input type="text" id="Rname"><br>
<label for="Rpass">Your Password:</label>
<input type="password" id="Rpass"><br>
<label for="Rpass2">Password again:</label>
<input type="password" id="Rpass2"><br><br>
<input type="submit" value="Submit">
</form>
</section>
If you run my site http://probuzzweb.co.uk/ in any browser it works fine...apart from opera. Run it and you'll see what I mean. It's bizarre and I can't figure out how to fix it.

Any help would be greatly appreciated. Thanks.
My Rig
(16 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core 2 Duo E7600 @ 3.06Ghz Asus P5N-D 750i SLI ATi Radeon HD 6770 4 x 2GB Corsair Dominator DDR3 
Hard DriveHard DriveOptical DriveOS
2 x 500Gb Seagate Barracuda RAID 0 2TB Seagate Barracuda DVD+CD-RW Combo, DVD-RW Windows 8 Professional X64 
OSMonitorMonitorKeyboard
Ubuntu 12.10 x64 AOC F22S+ 22" HD 1080p 17" Monitor Logitech 
PowerCaseMouse
Powercool 850W Antec 902 Logitech 
  hide details  
Reply
My Rig
(16 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core 2 Duo E7600 @ 3.06Ghz Asus P5N-D 750i SLI ATi Radeon HD 6770 4 x 2GB Corsair Dominator DDR3 
Hard DriveHard DriveOptical DriveOS
2 x 500Gb Seagate Barracuda RAID 0 2TB Seagate Barracuda DVD+CD-RW Combo, DVD-RW Windows 8 Professional X64 
OSMonitorMonitorKeyboard
Ubuntu 12.10 x64 AOC F22S+ 22" HD 1080p 17" Monitor Logitech 
PowerCaseMouse
Powercool 850W Antec 902 Logitech 
  hide details  
Reply
post #2 of 3
Thread Starter 
bumb

I still have this problem and no solution
My Rig
(16 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core 2 Duo E7600 @ 3.06Ghz Asus P5N-D 750i SLI ATi Radeon HD 6770 4 x 2GB Corsair Dominator DDR3 
Hard DriveHard DriveOptical DriveOS
2 x 500Gb Seagate Barracuda RAID 0 2TB Seagate Barracuda DVD+CD-RW Combo, DVD-RW Windows 8 Professional X64 
OSMonitorMonitorKeyboard
Ubuntu 12.10 x64 AOC F22S+ 22" HD 1080p 17" Monitor Logitech 
PowerCaseMouse
Powercool 850W Antec 902 Logitech 
  hide details  
Reply
My Rig
(16 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core 2 Duo E7600 @ 3.06Ghz Asus P5N-D 750i SLI ATi Radeon HD 6770 4 x 2GB Corsair Dominator DDR3 
Hard DriveHard DriveOptical DriveOS
2 x 500Gb Seagate Barracuda RAID 0 2TB Seagate Barracuda DVD+CD-RW Combo, DVD-RW Windows 8 Professional X64 
OSMonitorMonitorKeyboard
Ubuntu 12.10 x64 AOC F22S+ 22" HD 1080p 17" Monitor Logitech 
PowerCaseMouse
Powercool 850W Antec 902 Logitech 
  hide details  
Reply
post #3 of 3
I've had similar issues using jQuery transitions with CSS, in opera, where remnants of the div remain behind. So far I have not been able to find a solution and think it's a bug in Opera itself. I suggest you submit a bug report and/or recode it for Opera. Try using jQuery to do the sliding, which also provides an advantage in terms of older browser compatibility.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Problem with CSS3 Transition Opera!