title: Cypress element is not visible because it has an effective width and height of 0 x 0 pixels
body: <p>I am getting below error when performing action on a element in a iframe:</p>
  <p>&quot;Timed out retrying after 60000ms: expected '<p>' to be 'visible' This element <p> is not visible because it has an effective width and height of: 0 x 0 pixels.&quot;</p>
  <p><a href="https://i.stack.imgur.com/FZEdh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FZEdh.png" alt="enter image description here" /></a></p>
  <p>Here is my code for the element:</p>
  <pre><code>cy.get('iframeselector',{timeout: 150000})
      .its('0.contentDocument.body').should('not.be.empty')
      .then(cy.wrap).find('p').should('be.visible').clear().type('abc')
  </code></pre>
  <p>I have tried using {force:true} and even changing the width by invoke method. but nothing works for me so far. Any help will be appreciated.</p>
  <p>Below is the snap of html:
  <a href="https://i.stack.imgur.com/sBYMM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sBYMM.png" alt="enter image description here" /></a></p>