cannot capture nested elements like <div>. maybe it's same problem in html page.

[creatxrgithub]

start a new ionic project

this code is correct:

<IonItem>
            <IonTextarea
              value={'color test color test color test color test color test color test color test color test color test color test 文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試'}
              //onIonChange={ e => setResultText(e.detail.value!.toString()) }
              style={{
                //color: 'green',
                backgroundImage: `linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)`,
                //backgroundImage: `url('favicon.png')`, backgroundSize:'100% 100%',
                //WebkitBackgroundClip: 'text',
                //'-webkit-background-clip': 'text',
                //WebkitTextFillColor: 'transparent',
                //'-webkit-text-fill-color': 'transparent',
                }}
              autoGrow={true} rows={1} label="結果文本" labelPlacement="floating" placeholder="已轉換的文本"></IonTextarea>
          </IonItem>

in this code, it cannot capture the image correctly

<IonItem>
            <div
              style={{
              backgroundImage: `linear-gradient(to right, black, white)`,
              //backgroundImage: `url('favicon.png')`, backgroundSize:'100% 100%',
              width: '100%',
              height: '80%',
              overflowY: 'scroll',
              border: '1px'
              }}>
              <div
                contentEditable={true}
                suppressContentEditableWarning={true}
                style={{
                backgroundImage: `linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)`,
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent'
                }}>
                  color test color test color test color test color test color test color test color test color test color test
                  文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試
                  color test color test color test color test color test color test color test color test color test color test
                  文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試
                  color test color test color test color test color test color test color test color test color test color test
                  文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試
                </div>
            </div>
          </IonItem>

          <IonItem>
            <div
              id={'outDiv'}
              style={{
                //backgroundImage: `linear-gradient(to right, black, white)`,
                backgroundImage: `url('favicon.png')`, backgroundSize:'100% 100%',
                width: '100%',
                height: '80%',
                overflowY: 'scroll',
                border: '1px'
                }}>
              <textarea
                rows={10}
                style={{
                  backgroundImage: `linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)`,
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  width: '100%'
                  }}
                  defaultValue={`color test color test color test color test color test color test color test color test color test color test
                  文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試
                  color test color test color test color test color test color test color test color test color test color test
                  文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試
                  color test color test color test color test color test color test color test color test color test color test
                  文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試文本顏色綜合測試`}
                  >

                  </textarea>
            </div>
          </IonItem>