'textarea corner resize icon not hiding even when the popup above the textarea have large z-index..

I am working in a page, which contain textarea and a button, When click on button, i have to show popup.

When popup is open, the textarea right-bottom corner resize icon is visible over the popup, even though the popup have large z-index.

This issue is reproduce only mac osx 10.9.5 chrome browser.

Thanks in advance

Here is the screen shot of the popup

htmlcssmacosgoogle-chrometextarea


Solution 1:[1]

Not really an answer, but more of a bad work-around: hide the thing..

textarea {resize: none;}

Solution 2:[2]

This problem still persists.

I have found a resolution for this issue after a lot of tries. This may look very tricky. But trust me this works.

<i class="test"></i>
.test:after {
   content: "";
    position: absolute;
    animation: .3s ease-out forwards toggle-icon-off;
}

Solution 3:[3]

Style your popup as follows

.mypopup {
  z-index: 1; 
 }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mr. Hugo
Solution 2 prajnavantha
Solution 3 Aswathy krishna

Related Questions