Overflow doesn't work in Opera 28

Question

Does anyone know why Opera doesn't use overflow:hidden?

Left is Opera, right is Firefox enter image description here

CSS:

#ChatBig {
    width: 60%;
    height: 600px;
    margin: auto;
    background-color: white;
    overflow:hidden;
    resize:none;
    position: relative;
    border: 1px solid #000;
}
#ChatMessages{
    width: 100%;
    min-height: 498px;
    font-size: 16px;
    font-weight: normal;
    overflow:hidden;
    resize:none;
    position: absolute;
    bottom: 50px;
    margin-bottom: 10px;
}
#ChatText{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    overflow:hidden;
    resize:none;
    position: absolute;
    bottom: 0;
}

Opera 9 and 10 require the prefixed version, `-o-text-overflow`. — Kawinesh S K, Apr 20 '15 at 12:29
I cannot even do -o-text-overflow:hidden; gives me and error.. invalid css value on hidden — Emperial, Apr 20 '15 at 12:38
This is not a complete example, but I'm curious, does it work correctly in Chrome 41? — Erik Dahlström, Apr 20 '15 at 13:28
It should... Chrome works with everything (except Flash player mouse controls). — unbindall, Apr 20 '15 at 14:03
I don't know what your HTML looks like, but if it's a bit like [this](http://jsfiddle.net/MrLister/3avu7roy/1/), it works fine in Opera 28. — Mr Lister, Apr 20 '15 at 14:46
@KawineshSK that would be about the text-overflow property. This question has nothing to do with that. — Mr Lister, Apr 20 '15 at 14:47
Can you create a [jsfiddle](http://jsfiddle.net/) to demonstrate your problem? As far as I can tell, it should work fine. @MrLister's example works fine as well. — Amos M. Carpenter, Apr 21 '15 at 10:11

score 0 · Answer 1 · answered Aug 10 '15 at 21:35

Try with this:

#ChatBig {
    width: 60%;
    height: 600px;
    margin: auto;
    background-color: white;
    overflow:hidden;
    resize:none;
    position: relative;
    border: 1px solid #000;
}
#ChatMessages{
    width: 100%;
    min-height: 498px;
    font-size: 16px;
    font-weight: normal;
    overflow:hidden;
    resize:none;
    position: absolute;
    bottom: 50px;
    margin-bottom: 10px;
}
#ChatText{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    overflow:hidden;
    resize:none;
    position: absolute;
    bottom: 0;
}

<div id="ChatBig">
    <div id="ChatMessage">
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        A line of chat<br/>
        ...
    </div>
    <textarea id="ChatText">
    </textarea>
</div>

Overflow doesn't work in Opera 28

1 Answers1